<template>
  <div class="home">
    <h1 class="h1-width-100">less使用变量</h1>
    <ul class="menu-ul">
      <li><a href="/d1">item1</a></li>
      <li><a href="/d2">item2</a></li>
      <li><a href="/d3">item3</a></li>
      <li><a href="/d4">item4</a></li>
      <li><a href="/d4">item5</a></li>
    </ul>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  components: {
  }
}
</script>
<style lang="less" scoped >
// less也支持@import 导入其他的CSS  文件；
@import url("../util/comm.less");

p{
  color: @pink;
}
// @width: 300px;
// @border-w: 10px;
// @r: 255;
// @g: 255;
// @b: 255;
// @bgUrl: '@/assets';
// @color: yellow;
// @bgred: green;
// @myBlack: bgBlack;
// @bgBlack: black;

// .h1-width-100{
//   width: @width; /*直接使用变量做属性的值 */
//   // color: @color;
//   // background-color: @bgred;
//   // border: @border-w solid @color;
//   border: @border-w solid rgb(@r - 255, @g,@b) ; /*变量使用表达式的简单的计算*/

//   // background-image: url("@{bgUrl}/logo.png");  /*变量作为值的一部分：@{bgUrl} */

//   background-color: @@myBlack; /* 一个变量的值，是另一个变量的名字*/
//   color: @pink;
// }


</style>